<template>
	<view>
		<customHeader>
			<template v-slot:bg>
				<view class="swipers">
					 <swiper autoplay @change="onSwiperChange" :current="current">
						  <swiper-item v-for="(item, index) in info.images" :key="index">
								<image :src="item.image" mode="aspectFill"></image>
						  </swiper-item>
					</swiper>
					<view class="dots">{{current + 1}}/{{info.images.length}}</view>
				</view>
			</template>
			<template v-slot:left>
				<image @click="back" :src="require('@/managePackage/image/backs.png')" class="backs"></image>
			</template>
		</customHeader>
		<view class="box-cont">
			<view class="gou-box">
				<view class="gou">
					<view class="price-box">
						<view class="pris">
							<view><text>￥</text>{{ info.shopPrice }}</view>
							<text>￥{{ info.marketPrice }}</text>
						</view>
						<!-- <view class="proces">库存??%</view> -->
					</view>
					<view class="times" v-if="info.isTodaySeckill == 2">
						<image :src="require('@/managePackage/image/gou.png')"></image>
						<view>
							<view>
								<view>{{timeInfo.hour}}</view>
								<text>:</text>
								<view>{{timeInfo.mini}}</view>
								<text>:</text>
								<view>{{timeInfo.second}}</view>
							</view>
							<text>{{timeInfo.type}}</text>
						</view>
					</view>
				</view>
				<view class="namesd">
					<view>{{info.name}}</view>
					<view>{{ info.describe }}</view>
				</view>
			</view>
			<view class="xianzhi">
				<text>限制</text>
				<text>·</text>
				<view>限购{{info.maxBynum || 0}}件</view>
			</view>
		</view>
		<view class="foot-las">
			<view class="icons" @click="collection">
				<view>
					<image :src="require('@/static/image/version/love.png')" v-if="!info.isCollect"></image>
					<image :src="require('@/static/image/version/shou.png')" v-else></image>
				</view>
				<text>{{info.isCollect ? '取消' : '收藏'}}</text>
			</view>
			<view class="icons" hover-class="hover_class" @click="goCar">
				<view>
					<image :src="require('@/static/image/version/shops.png')"></image>
					<view v-if="cart.length">{{cart.length}}</view>
				</view>
				<text>购物车</text>
			</view>
			<view class="btnd" hover-class="hover_class" @click="addCar">{{info.isTodaySeckill == 2 ? '立即抢' : '加入购物车'}}</view>
		</view>
		<rulePop ref="rulePop" @update="getCart"/>
	</view>
</template>

<script>
import rulePop from '@/pages/home/component/rulePop'
import { productInfo, userCollect, cartList } from '@/utils/api/home.js'
export default {
	components: {
		rulePop
	},
	data() {
		return {
			info: {
				images: []
			},
			current: 0,
			cart: [],
			timeInfo: {
				hour: '00',
				mini: '00',
				second: '00',
				type: ''
			}
		}
	},
	onLoad(e) {
		if(e.id) {
			this.getDetail(e.id)
			this.getCart()
		}
	},
	methods: {
		// 购物车列表
		getCart() {
			cartList().then((res) => {
				this.cart = res.data || []
			})
		},
		// 收藏
		collection() {
			uni.showLoading({
				title: this.info.isCollect ? '取消收藏' : '收藏中'
			})
			userCollect({productId: this.info.id}).then((res) => {
				setTimeout(() => {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.info.isCollect = !this.info.isCollect
				}, 300)
			})
		},
		// 详情
		getDetail(id) {
			uni.showLoading({
				title: '加载中'
			})
			productInfo({id}).then((res) => {
				this.info = res.data || {}
				this.getShopTime()
			}).finally(() => {
				uni.hideLoading()
			})
		},
		// 获取当前时间
		getNowTime() {
			const now = new Date();
			const hour = now.getHours();
			const minute = now.getMinutes();
			const second = now.getSeconds();
			return `${hour}${minute}${second}`
		},
		setTime(str, type) {
			const [hour, mini, second] = str.split(':')
			this.timeInfo.hour = hour
			this.timeInfo.mini = mini
			this.timeInfo.second = second
			this.timeInfo.type = type
		},
		// 是否处于抢购时间中
		getShopTime() {
			const {isTodaySeckill, seckillStartTime, seckillEndTime} = this.info
			if(isTodaySeckill == 2 && seckillStartTime && seckillEndTime) {
				const startNum = Number(seckillStartTime.replaceAll(':', ''))
				const endNum = Number(seckillEndTime.replaceAll(':', ''))
				const nowTime = Number(this.getNowTime())
				if(nowTime < startNum) {
					this.setTime(seckillStartTime, '开始')
				} else if(nowTime >= startNum && nowTime<= endNum) {
					this.setTime(seckillEndTime, '结束')
				} else {
					this.info.isTodaySeckill = 1
				}
			}
		},
		goCar() {
			uni.switchTab({
				url: '/pages/shopCar/index'
			})
		},
		addCar() {
			this.$refs.rulePop.openPop(this.info)
		},
		back() {
			uni.navigateBack()
		},
		onSwiperChange(e) {
			this.current = e.detail.current
		}
	}
}
</script>

<style scoped lang="scss">
.foot-las {
	width: 100%;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	padding: 30upx 20upx 20upx 42upx;
	display: flex;
	align-items: center;
	>.btnd {
		flex: 1;
		height: 80upx;
		background-color: #FE3629;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28upx;
		color: #FFFFFF;
		border-radius: 40upx;
	}
	>.icons:not(:last-child) {
		margin-right: 43upx;
	}
	>.icons {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		>view{
			position: relative;
			>image {
				width: 44upx;
				height: 44upx;
				margin-bottom: 10upx;
			}
			>view {
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
				background-color: #FE3629;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22upx;
				color: #FFFFFF;
				position: absolute;
				top: -4upx;
				right: -15upx;
			}
		}
		>text {
			font-size: 22upx;
			color: #1D1D1D;
		}
	}
}
.xianzhi {
	background-color: #fff;
	width: 100%;
	border-radius: 20upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 33upx 27upx;
	text {
		font-size: 26upx;
		color: #969696;
	}
	>text:nth-of-type(2) {
		display: inline-block;
		margin: 0 18upx;
	}
	>view {
		font-size: 26upx;
		color: #000000;
	}
}
.gou-box {
	background-color: #fff;
	border-radius: 20upx;
	overflow: hidden;
	margin-bottom: 21upx;
}
.box-cont {
	box-sizing: border-box;
	padding: 20upx;
	background: #F8F8F8;
	min-height: 50vh;
	padding-bottom: 160upx;
	.namesd {
		box-sizing: border-box;
		padding: 39upx 25upx 34upx 25upx;
		>view:nth-of-type(1) {
			font-size: 36upx;
			font-weight: 500;
			color: #000000;
			display: -webkit-box;
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
			  overflow: hidden;
			  text-overflow: ellipsis;
			line-height: 50upx;
		}
		>view:nth-of-type(2) {
			font-size: 26upx;
			margin-top: 20upx;
			color: #969696;
			line-height: 40upx;
		}
	}
	.gou {
		width: 100%;
		height: 140upx;
		border-radius: 20upx;
		background-color: #FE3629;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 40upx 0 30upx;
		>.price-box {
			>.proces {
				width: 211upx;
				height: 20upx;
				background-color: #FED0D1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16upx;
				line-height: 1;
				margin-top: 11upx;
				color: #E00E00;
				border-radius: 10upx;
			}
			>.pris {
				display: flex;
				align-items: flex-end;
				>text {
					font-size: 26upx;
					color: #FFFFFF;
					text-decoration-line: line-through;
					margin-left: 15upx;
					margin-bottom: 4upx;
				}
				>view {
					display: flex;
					align-items: flex-end;
					font-size: 48upx;
					color: #FFFFFF;
					font-weight: bold;
					>text {
						font-size: 26upx;
						color: #FFFFFF;
						margin-bottom: 4upx;
					}
				}
			}
		}
		.times {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			>image {
				width: 200upx;
				height: 50upx;
				margin-bottom: 15upx;
			}
			>view {
				display: flex;
				align-items: center;
				>text {
					font-size: 24upx;
					color: #FFFFFF;
					font-weight: bold;
					margin-left: 10upx;
				}
				>view {
					display: flex;
					align-items: center;
					>view {
						width: 37upx;
						height: 37upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22upx;
						color: #FFFFFF;
						border-radius: 6upx;
						background-color: rgba(0,0,0,0.6);
					}
					>text {
						font-size: 22upx;
						color: #FFFFFF;
						margin: 0 4upx;
					}
				}
			}
		}
	}
}
.backs {
	width: 53upx;
	height: 53upx;
}
::v-deep .allHead {
	z-index: 1;
	position: relative;
	height: 750upx !important;
	>view:not(:last-child) {
		background: transparent !important;
	}
}
.swipers {
	width: 100%;
	height: 750upx;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	>.dots {
		width: 90upx;
		height: 40upx;
		background-color: rgba(0,0,0,0.7);
		border-radius: 20upx;
		display: flex;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		color: #FFFFFF;
	}
	swiper {
		width: 100%;
		height: 100%;
		swiper-item {
			width: 100%;
			height: 100%;	
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>